import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Processed, Satisfaction, Untreated, volume } from '@/utils/trainUtil';
import { getAppealStatistic } from '@/services/GovernmentTrain/GovernmentTrain';
import { history } from '@@/core/history';
import { message, Card, Button } from 'antd';
import { getToken } from '@/utils/storage';

const ThroughTrain: React.FC = () => {
  const [statistic, setStatistic] = useState({});
  useEffect(() => {
    getAppealStatistic({})
      .then((resp) => {
        setStatistic(resp.results);
      })
      .catch((error) => {
        throw error;
      });
  }, []);
  // /AppealSubmission
  const getHref = () => {
    try {
      getToken() ? history.push({ pathname: '/appealSubmission' }) : message.error('请先登录');
    } catch (error) {
      message.error('请联系管理员');
    }
  };
  return (
    <Card
      title={
        <div className={styles.carHeader}>
          <div className={styles.carHeaderTitle}>政企直通车</div>
          <Button className={styles.carHeaderBtn} onClick={getHref}>
            提交诉求
          </Button>
        </div>
      }
      className={styles.troughCenter}
    >
      <div className={styles.troughSide}>
        <div className={styles.sidebar}>
          <div>
            <img src={volume} />
          </div>
          <div className={styles.appealNum1}>{statistic?.annualTotalCount}</div>
          <div>年度总诉求量(条)</div>
        </div>
        <div className={styles.sidebar}>
          <div>
            <img src={Processed} />
          </div>
          <div className={styles.appealNum2}>{statistic?.handledCount}</div>
          <div>已处理(条)</div>
        </div>
        <div className={styles.sidebar}>
          <div>
            <img src={Untreated} />
          </div>
          <div className={styles.appealNum3}>{statistic?.untreatedCount}</div>
          <div>未处理(条)</div>
        </div>
      </div>
    </Card>
  );
};

export default ThroughTrain;
